<template>
  <uni-popup ref="popup">
    <view class="_preview-container">
      <swiper class="_preview-iamge">
        <swiper-item
          class="swiper-item"
          v-for="(img, index) in urls"
          :key="index"
        >
          <image class="img" :src="img" mode="scaleToFill" />
        </swiper-item>
      </swiper>

      <view class="btn-box">
        <button class="btn btn-danger" @click="onDel">删除</button>
      </view>
    </view>
  </uni-popup>
</template>

<script>
import uniPopup from "@/components/uni-popup/uni-popup";
export default {
  props: {
    urls: {
      type: Array,
      default() {
        return [];
      },
    },
    current: {
      type: [String, Number],
    },
  },
  data() {
    return {
      _current: 0,
    };
  },
  methods: {
    open() {
      if (typeof this.current === "number") {
        this._current = this.current;
      } else {
        let index = this.urls.findIndex((i) => i == this.current);
        this._current = index >= -1 ? index : 0;
      }
      this.$refs.popup && this.$refs.popup.open();
    },
    close() {
      this.$refs.popup && this.$refs.popup.close();
    },
    onDel() {
      this.$emit("delete", this._current);
    },
  },
};
</script>

<style lang="stylus" scoped>
._preview-container {
  position: relative;
  width: 100vw;
  height: 100vh;
  background: #000;
  overflow: hidden;

  .btn-box {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100rpx;
    margin: auto;
  }

  ._preview-iamge {
    width: 100%;
    height: 100%;

    .swiper-item {
      display: flex;
      align-items: center;
      justify-content: center;

      .img {
        display: block;
        width: auto;
        flex: 0 0 auto;
      }
    }
  }
}
</style>